在開始之前，我想先分享一下自己學習網頁開發的過程。

我一開始是自學，而且學得亂七八糟，只知道網頁前端三大元素為 Html、CSS、JavaScript，其餘架構、DOM、網頁載入流程等等一概不知，所有寫法都是自己去估狗各種教學文亂拚亂湊出來的。
甚至我不是從JavaScript開始學習，而是從jQuery開始(因為古早的教學文大多是使用jQuery)，而且也沒有去研究跑的過程，覺得程式能跑就好，結果就出現這種龍蛇雜處的寫法

    var v_Name = document.getElementById('inputName').value;
    var v_Icon = $('#inputIcon option:selected').text();
    var v_Mark = document.getElementById('inputMark').value;
    var v_Link = document.getElementById('inputLink').value;
    var v_HotLink = $('[name="rg_hotlink"]:checked').val();
    var v_IEopen = $('[name="rg_ieopen"]:checked').val();
    var v_itemtype = $('[name="rg_itemtype"]:checked').val();
    var v_Color = document.getElementById('inputColor').value;

現在回頭看看會覺得當初自己寫的Code怎麼會這麼的 白癡 有個性

如此這般，我打算從JavaScript基礎開始打掉重練
希望未來的我如果忘了什麼觀念，回來看能夠馬上回憶起來
　

正題開始

測試及輸出內容

在開發前端時，最常需要做的就是測試及輸出各種需要的資料，包含變數、元件、從後端接回來的資料等等，可以查看這些資料的方法有兩種

• alert()
  此方法會在網頁上跳出警示視窗，不過我個人不是很喜歡這種方法，除了不好看之外，視窗跳出來還要去點掉也很麻煩(明明就自己懶)。
  程式碼範例如下，小括弧內填入想顯示的資料

alert("Hello JavaScript!!");

• console.log()
  測試時我都使用此方法，不用擔心介面呈現問題，且資料即時出現。
  程式碼範例如下，一樣小括弧內填入想顯示的資料

console.log('Hello JavaScript!!');

變數與資料型別

變數有點抽象，可以將其理解為「儲存資料的容器」，變數是使用var作為開頭來宣告，寫法如下:

var aa;  // 宣告一個名稱為aa的變數

變數命名上有幾個注意事項:

• 開頭不能用數字
  例如: var 1abc;
• 不能用-及.
  例如: var a-b、var a.b
• 不能使用關鍵字
  關鍵字有哪些可參考w3schools
  像是判斷式if或是迴圈for，因JavaScript已經內定這些關鍵字的功能，故無法使用
• 大小寫有分
• 變數需有語意化
  此規則不強迫，但有使用的話在日後維護上會方便許多，可以馬上聯想到這個變數的用途
  例如: 紅茶的價格可宣告為blackTeaPrice、螢幕寬度可宣告為screenWidth

變數中可以存放的值分為幾種資料型別，常見的有:

• 數字(number): 0、999、-54321
• 字串(string): 'Hello JavaScript!!'、"~HexSchool~"
• 布林(boolean): true、false
  其他還有 null、undefined、object等

數字型別

數字型別顧名思義就是幼稚園小學時期學到的由±0~9排列組合成的數字
假設一杯紅茶的價錢為30，則可用如下方式宣告:

var blackTeaPrice = 30;  // 宣告一個名稱為blackTeaPrice的變數 值為30
console.log(blackTeaPrice);  // 30

宣告變數是因為數值會變動(廢話)，所以說
假設今天這杯紅茶打8折或是折價5元，可以這樣寫:

var blackTeaPrice = 30;  // 宣告一個名稱為blackTeaPrice的變數 值為30
blackTeaPrice = blackTeaPrice*0.8;  // blackTeaPrice打8折
console.log(blackTeaPrice);  // 24

var blackTeaPrice = 30;  // blackTeaPrice值為30
blackTeaPrice = blackTeaPrice-5;  // blackTeaPrice減5元
console.log(blackTeaPrice);  // 25

字串型別

字串型別會使用單引號'或是雙引號"作為一個字串的開頭及結尾，以單引號做開頭就要以單引號做結尾，雙引號也一樣，寫法如下:

var str = '我是字串';
var str2 = "我也是字串";

以上面紅茶價錢為例的話，用字串的寫法會變成:

var blackTeaPrice = '30';  // 宣告一個名稱為blackTeaPrice的變數 值為'30'
console.log(blackTeaPrice);  // 30

字串也可以相加:

var hello = "Hello ";  // 宣告一個名稱為hello的變數 值為"Hello "
var js = "JavaScript!!";  // 宣告一個名稱為js的變數 值為"JavaScript!!"
var hellojs = hello+js;  // 將hello與js兩字串相加
console.log(hellojs);  // Hello JavaScript!!

比較有趣的是，字串內如果都是數字，字串相乘時會自動轉型為數字型別，計算出的結果也會是數字型別，但相加就不會轉型，而是維持原本字串的特性來做相加:

var num1 = "123";
var num2 = "45";
console.log(num1*num2);  // 5535
console.log(num1+num2);  // 12345

布林型別

布林型別非常單純，只有true或false，常用在判斷式上

var mybool = true; // 宣告一個名稱為mybool的變數 值為true

null及undefined

這裡對我來說算是最重要的部分，因為之前一直搞不懂兩者間的差異
例如宣告一個變數aa但不賦值，這時aa應該是null?還是undefined?

var aa; 
console.log(aa);  // undefined

答案是undefined，但對於學過其他語言的我來說，沒賦予值的變數，則該變數值就會是null啊！！所以我搞不懂也是合情合理xD
但在javascript的世界不是這樣設定的
只有在將變數賦予值為null時才會是null，例如:

var aa = null;
console.log(aa);  // null

簡而言之，
還沒賦予過值，則變數會是undefined
有賦予過值，且賦予的值為是null時才是null

函式

函示(function)是一個非常方便的東西，他可以用在處理任何資料的運算上
可重複使用性很高，日後維護也方便許多
基本的函式寫法如下，小括號內放參數，大括號內寫要執行的動作:

/* myFunctionName: 自訂函示名稱
 * arg01: 第一個參數
 * arg02: 第二個參數 */
function myFunctionName(arg01,arg02){
  // 要做的事情
}

函示究竟在什麼情況下會使用到呢? 假設一個情境
A客人在飲料店買了兩杯30元的紅茶，還有一杯35元的奶茶，老闆要計算總共需要付多少錢，可以這樣寫:

var blackTeaPrice = 30;  // 宣告紅茶價格為30元
var milkTeaPrice = 35;  // 宣告奶茶價格為35元
var totalPrice = blackTeaPrice*2 + milkTeaPrice*1;  // 計算總金額
console.log(totalPrice);  // 95

但如果B客人點了三杯30元的紅茶，還有兩杯35元的奶茶，這時又要做一次上面的計算嗎?
對於類似這種情況的重複性動作，可以使用函示來解決:

var blackTeaPrice = 30;  // 宣告紅茶價格為30元
var milkTeaPrice = 35;  // 宣告奶茶價格為35元
/* 定義一個函式計算總金額並回傳
 * blackTeaNum: 紅茶數量
 * milkTeaNum: 奶茶數量 */
function calTotalPrice(blackTeaNum,milkTeaNum){
  var totalPrice = blackTeaPrice*blackTeaNum + milkTeaPrice*milkTeaNum;
  console.log(totalPrice);
}

// 呼叫定義的函式去計算總金額
calTotalPrice(2,1);  // A客人的總金額輸出: 95
calTotalPrice(3,2);  // B客人的總金額輸出: 160

全域變數與區域變數

講到函示就需要提到全域與區域變數
全域變數是指在最外層宣告的變數，宣告後在任何地方都能使用它
它會存在window中，可以用變數名稱來呼叫，也能用window.變數名稱來呼叫他
區域變數顧名思義是在一個區塊內宣告的變數，只能在當下宣告的區塊內才能使用
以上面的例子來說，紅茶價格(blackTeaPrice)與奶茶價格(milkTeaPrice)歸屬於全域變數，總金額(totalPrice)歸屬於區域變數

我當初知道有這種分類時就產生了疑問，既然全域變數這麼方便任何地方都能使用，為什麼不全用全域變數就好了?
傻B，難道小時候被家人用乳名叫包包，長大之後還要被叫包包嗎，乳名長大後就不能那麼叫拉，不然多害羞~
區域變數就跟乳名一樣，僅限當下呼叫使用，時效過了就不需要就丟了，如此也能將效能有效率的使用
試想如果所有資料都放在全域中，瀏覽器會變得多肥大

(註: 區塊指的是用大括號包住的範圍)

return

函示也能做雙向互動，而雙向互動就需要搭配return一起使用
以剛才的例子來說，可以將程式碼改為:

var blackTeaPrice = 30;  // 宣告紅茶價格為30元
var milkTeaPrice = 35;  // 宣告奶茶價格為35元
/* 定義一個函示計算總金額並回傳
 * blackTeaNum: 紅茶數量
 * milkTeaNum: 奶茶數量 
 * return: 回傳值 */
function calTotalPrice(blackTeaNum,milkTeaNum){
  var totalPrice = blackTeaPrice*blackTeaNum + milkTeaPrice*milkTeaNum;
  return totalPrice;
}

var customerA = calTotalPrice(2,1);  // 傳入2杯紅茶及1杯奶茶，回傳值給customerA變數
console.log(customerA);  // 95
var vustomerB = calTotalPrice(3,2);  // 傳入3杯紅茶及2杯奶茶，回傳值給customerB變數
console.log(customerB);  // 160

part1先到這，在學習基礎時，因為實在是很無趣，但又是需要去了解的知識，好幾次都學到一半睡著，醒來之後又再重看一遍，就怕自己漏學了什麼觀念，不過也算是變相的加深印象吧！！
分享學習心得也是一樣，就像小學國中時期抄寫課文一樣，抄多了抄久了就背起來了(現在還是忘了啊)

希望日後自己來回顧時可以看得懂當初自己寫的筆記，哈哈哈~